<template>
	<div class="category commodity" @click="closeSearch">
		<Navbar></Navbar>
		<svg width="30" height="30" class="next" @click="nextProduct">
			<use xlink:href="#right" v-if="dialogVisible&&index!=categoryList.data.length-1" />
		</svg>
		<svg width="30" height="30" class="prev" @click="prevProduct">
			<use xlink:href="#left" v-if="dialogVisible&&index!=0" />
		</svg>
		<!--.................查看商品详情....................-->
		<el-dialog :visible.sync="dialogVisible" size="small" :close-on-click-modal="false" custom-class="checkBox" :show-close="false" class="check">
			<svg width="26" height="26" class="closebox" @click="dialogVisible = false">
				<use xlink:href="#close" />
			</svg>
			<!--.................主体内容....................-->
			<div class="commodityMess" style="padding-top: 0;">
				<!--.................标题....................-->
				<div class="clearfix mb-20">
					<p class="float-l f18 font-b color-3">商品信息</p>
				</div>
				<!--.................查看信息的内容，在组件里....................-->
				<checkProducts :checkProduct="onlyProductMess"></checkProducts>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="categoryDialog" :title="dialogTitle" size="tiny" custom-class="categoryDialog" :close-on-click-modal="false">
			<productBrand @categorys="categorys" :checkStyle="false" :Classify="brandList" :classfyId="classifyName">
				<div class="categorylabel" slot="header">
					<!--................选中的分类信息..............-->
					<span 
						style="font-family: PingFangSC-Regular;
						font-size: 14px;
						color: #7F7F7F;
						letter-spacing: 0;
						line-height: 14px;" 
						v-if="hasCheckBrand()"
					>
		        		当前已选择品牌<font color="#0070C9">"{{classifyName.banner_click_name}}"</font>
        			</span>
				</div>
			</productBrand>

			<span slot="footer" class="dialog-footer">
		       <el-button type="primary" @click="setProduct">保存</el-button>
		       <el-button @click="categoryDialog = false">取消</el-button>
    		</span>
		</el-dialog>
		<div class="g-content">
			<div class="buttons">
				<el-button class="store-button2  mb-20" @click="batchCategory">
					<i class="iconfont icon-fenlei f12"></i>
					<span>批量设置</span>
				</el-button>				
				<search v-on:searchMthod="search" v-on:emptyMthod="empty" v-on:searchCondition="searchCondition"  ref="isShow">
					<template>
						<div class="condition">
							<span class="f12 color-3">商品价格:</span>
							<input type="number" v-model.number="searchMess.minPrice" /> 到 <input type="number" v-model.number="searchMess.maxPrice" />
						</div>
						<div class="classify ">
							<span class="f12 color-3">商品品牌:</span>
							<el-select v-model="searchMess.brandId" filterable placeholder="请选择" >
								<el-option v-for="(item,index) in brandList" :key="index" :value="item.id" :label="item.brand_name"> </el-option>
							</el-select>
						</div>
						<div class="condition">
							<span class="f12 color-3">创建时间:</span>
							<el-date-picker v-model="searchMess.minPubTime" type="date" placeholder="选择日期" :editable="false"> </el-date-picker> 到
							<el-date-picker v-model="searchMess.maxPubTime" type="date" placeholder="选择日期" :editable="false"> </el-date-picker>
						</div>
						<div class="classify ">
							<span class="f12 color-3">商品状态:</span>
							<el-select v-model="searchMess.statused" filterable placeholder="请选择">
								<el-option v-for="(item,index) in statusList" :key="index" :value="item.status" :label="item.value"> </el-option>
							</el-select>
						</div>
					</template>
				</search>
			</div>
			<el-table :data="categoryList.data" style="width: 100%" @selection-change="handleSelectionChange" :empty-text="emptyText" @sort-change="sortChange">
				<el-table-column type="selection" width="40"> </el-table-column>
				<el-table-column prop="images" width="74">
					<template slot-scope="props">
						<img :src="props.row.images[0].image_url" alt="" class="view_img">
					</template>
				</el-table-column>
				<el-table-column prop="product_name" label="商品名称" width="305">
					<template slot-scope="props">
						<div class="product_name" @click="checkProduct(props.$index)">{{props.row.product_name}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="product_price_yuan.min" label="价格" sortable="custom" width="140">
					<template slot-scope="props">

						<span v-if="props.row.product_price_yuan.min==props.row.product_price_yuan.max " class="product_price">
					         {{props.row.product_price_yuan[0]}}
					    </span>
						<span v-else class="product_price">
					        {{props.row.product_price_yuan.min}} - {{props.row.product_price_yuan.max}}
					    </span>

					</template>
				</el-table-column>
				<el-table-column prop="shop_categorys" label="所属品牌" width="220">
					<template slot-scope="scope">
						<div v-if='scope.row.brand != null'>
							<img :src="scope.row.brand.image_url" style="display: inline-block;" width="45" height="45">
							<p style="display: inline-block; margin-left: 5px;">{{scope.row.brand.brand_name}}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="创建时间" sortable="custom" width="152"></el-table-column>
				<el-table-column prop="status" label="状态" width="152">
					<template slot-scope="scope">
						<span v-if='scope.row.status=="on"'>出售中</span>
						<span v-else class="color-7F">仓库中</span>
					</template>
				</el-table-column>
				<el-table-column prop="shop_categorys" label="操作" width="116">
					<template slot-scope="scope">
						<el-button type="text" size="small" v-if='scope.row.brand == null' @click="editCategorys(scope.row)">
							设置品牌
						</el-button>
						<el-button type="text" size="small" v-if='scope.row.brand != null' @click="editCategorys(scope.row)">
							编辑品牌
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-show="total" @current-change="handleCurrentChange" :current-page.sync="shopMess.page" :page-size="shopMess.per_page" layout="total, prev, pager, next" 
				:total="total" class="mt-20">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import Navbar from "@/components/commodity/Navbar"
	import search from '@/components/commodity/search'
	import storeClassify from '@/utils/storeClassify'
	import commodityMethod from '@/utils/commodity'
	import productBrand from '@/components/myStore/productBrand'
	import checkProducts from "@/components/commodity/checkProducts"
	import onOffProd from "@/utils/onOffPro"
	import {getBrandList,checkProduct,setProductsBrand} from "@/api/commodity"

	export default {
		name: "category",
		data() {
			return {
				arr: ["分类二", "分类一"],
				classifyName: {},
				check_brand_name: '',
				showIndex: "",
				total: parseInt(""),
				list: [],
				statusList: [{
					"status": "on",
					"value": "出售中"
				}, {
					"status": "off",
					"value": "仓库中"
				}],
				isEdited: false,
				dialogVisible: false,
				categoryDialog: false,
				dialogTitle: "设置品牌",
				index: 0,
				emptyText: "仓库中未发现商品记录",
				changeList: {
					products: [],
					shop_categorys: []
				},
				changeProduct: {
					product_id: "",
					shop_categorys: []
				},
				searchMess:{
					classifyId: "",
					brandId: "",
					statused: "on",
					minPrice: "",
					maxPrice: "",
					minPubTime: "",
					maxPubTime: "",
				},
				shopMess: {
					mall_id: "",
					shop_id: "",
					per_page: 20,
					page: 1,
					search: {
						status:"on"
					}
				},
				categoryList: {},
				onlyProductMess: {},
				shop_category:[],
				searchCon:{},
				deleteAttrApi:["product_price_yuan","shop_category_id","create_time","status"],
				isEmptyError:false,
				isRturn:{},
				order:{},
				brandList: []
			}
		},
		mixins: [storeClassify, commodityMethod, onOffProd],
		components: {
			Navbar,search,productBrand,checkProducts
		},
		created() {
			this.searchMethods();
			let data = JSON.parse(JSON.stringify(this.$store.getters.getBrandList));
			this.brandList = data
			let mall_id = this.$store.getters.getMall_id;
			let shop_id = this.$store.getters.getShop_id;
			this.$set(this.shopMess, "mall_id", mall_id);
			this.$set(this.shopMess, "shop_id", shop_id);
		},
		methods: {
			hasCheckBrand() {
				return !!this.classifyName.banner_click_id;
			},
			closeSearch(){
				this.$refs.isShow.closeSearch()
			},
			//点击编辑、添加分类
			editCategorys(product) {
				this.$set(this.changeProduct, "product_id", product.id);
				this.categoryDialog = true;
				this.dialogTitle = "设置品牌";
				this.classifyName = {};
				//分类没有那么就直接返回
				if(this.brandList.length<=0) {
					return;
				}

				if(product.brand != null) {
					this.dialogTitle = "编辑品牌";
					this.classifyName = {
						banner_click_id: product.brand.id,
						banner_click_name: product.brand.brand_name
					}
				}				
			},
			//批量分类按钮
			batchCategory() {
				if(this.changeList.products.length == 0) {
					return;
				}
				this.categoryDialog = true;
				this.dialogTitle = "批量品牌"
				this.classifyName = {};
			},
			categorys(data) {
				this.classifyName = data;
			},
			toggleShow(index) {
				if(index === this.showIndex) {
					this.showIndex = "";
				} else {
					this.showIndex = index;
				}
			},
			//获取商品链接列表的方法（共用）
			searchCondition(val) {
				if(val!==undefined){
					this.shopMess.search=Object.assign({},this.shopMess.search,val);	
				}else{
					delete this.shopMess.search.product_name;
				}
				this.emptyText = "未搜索到相关商品";
				//清空排序样式
				if(JSON.stringify(this.order)!=="{}"){
					this.order.column.prop="";				
					this.order.column.order="";
				}
				this.searchMethods();
			},
			search() { //筛选商品
				this.switchShow = false;
				this.NumberMenthods("maxPrice","minPrice","product_price_yuan","最高价格小于最低价格");
				if(this.searchMess.classifyId != "") {
					this.searchCon.shop_category_id = this.searchMess.classifyId
				}
				if(this.searchMess.brandId != "") {
					this.searchCon.brand_id = this.searchMess.brandId
				}
				this.timeMenthods("minPubTime","maxPubTime","create_time","最小时间小于最大时间");
				if(this.searchMess.statused != "") {
					this.searchCon.status = this.searchMess.statused;
				}
				if(this.isEmptyError) {
					return;
				}
				this.shopMess.search=Object.assign({},this.shopMess.search,this.searchCon)
				this.emptyText = "未搜索到相关商品";
				//清空排序样式
				if(JSON.stringify(this.order)!=="{}"){
					this.order.column.prop="";				
					this.order.column.order="";
				}
				this.searchMethods()
			},
			empty() { //清空
				let arr=["classifyId","brandId","statused","minPrice","maxPrice","minPubTime","maxPubTime"];
				this.clear(arr,this.searchMess);
				//清除传给Api的条件	
				if(this.shopMess.search!==undefined){
					this.deleteAttrApi.map(item =>{
						if(this.shopMess.search[item]!==undefined){
							return delete this.shopMess.search[item]
						};
					})
				}
				delete this.searchCon.shop_category_id;
				this.searchCon.status="all";
				this.$set(this.shopMess,"search",{status:"all"})
				//清空排序样式
				if(JSON.stringify(this.order)!=="{}"){
					this.order.column.prop="";				
					this.order.column.order="";
				};
				//清空然后掉接口重新拉取列表
				this.searchMethods()
			},
			handleSelectionChange(list) { //选中
				let arr = [];
				for(let val of list) {
					arr.push({
						product_id: val.id
					})
				}
				this.$set(this.changeList, "products", arr);
			},
			checkProduct(index) {
				this.index = index;
				let list = this.categoryList.data; 
				let product_id = list[index].id;
				checkProduct(product_id)
					.then(({data}) => {				
						if(this.dialogVisible == false) {
							this.dialogVisible = true;
						}
						this.onlyProductMess = data;
					})
					.catch(({response: {data}}) => {
						 this.$message.error(data.errorcmt);
					})	
			},
			nextProduct() {
				if(this.index < this.categoryList.data.length - 1) {
					this.index++;
					this.checkProduct(this.index)
				}
			},
			prevProduct() {
				if(this.index > 0) {
					this.index--;
					this.checkProduct(this.index)
				}
			},
			setProduct() {					
				if(JSON.stringify(this.classifyName) == "{}") {
					this.$message("请选择品牌");
					return;
				}
				let arrProduct;
				//批量分类中的按钮
				if(this.dialogTitle != "批量品牌") {	
					arrProduct = {products:this.changeProduct.product_id}
				}else{
					arrProduct = this.changeList
				}
				setProductsBrand(arrProduct,this.classifyName.banner_click_id)
				.then((data) => {
					this.categoryDialog = false;
					this.searchMethods();
					this.$message('设置品牌成功');
				}).catch((data)=>{
					this.$message.error(data.errorcmt);
				})
			}
		}
	}
</script>

<style lang="scss">
	.category {
		.Classify {
			min-height: 300px!important;
		}
		.el-table{
			overflow:visible;
			.el-table__body-wrapper{
				overflow: inherit;
			}
		}
		.btn_delete {
			margin-left: 10px;
			cursor: pointer;
		}
		.toggle {
			color: #7F7F7F;
			cursor: pointer;
			position: relative;
		}
		.toggle+ul {
			display: none;
		}
		.toggle+.categoryBox {
			display: block;
			position: absolute;
			background: #fff;
			width: 184px;
			box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
			border-radius: 2px;
			z-index: 1000;
			padding: 10px;
		}
		.check {
			.el-dialog__header{
				padding:0;
			}
		}

		.el-dialog__body {
			padding:20px;
			.Classify {
				border-bottom: 1px solid #E9EEF2;
			}
		}
	}
</style>